<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

    <div id="element-mm" style="width:100px;">
        <div data-options="" onclick="editHtml()">模板</div>
        <div data-options="">数据</div>       
    </div>

<div id="template-tb" >
	<a href="#" onclick="addTemplate()" class="easyui-linkbutton " data-options="iconCls:'icon-add',plain:true" >添加</a>
	<a href="#" id="template-btn-edit" class="easyui-splitbutton"  data-options="menu:'#element-mm',iconCls:'icon-edit',plain:true,disabled:true" >编辑</a>							
	<a href="#" class="easyui-linkbutton tngou-btn-template"  data-options="iconCls:'icon-cut',plain:true,disabled:true" >删除</a>						
	<span style="float:right;margin-right: 15px;"> 
		<input id="user-search" class="searchbox">
	</span>
</div>

<!-- 右键菜单 -->
<div id="template-menu" class="easyui-menu" style="width:120px;">
	<div data-options="iconCls:'icon-edit'">编辑数据</div>		
	<div data-options="iconCls:'icon-cut'">删除数据</div>	
</div>


	<section class="easyui-layout" style="width:100%;height:100%;">


			<table id="template-table" class="easyui-datagrid"
				style="width:100%;height:100%;"
				data-options="
				toolbar:'#template-tb',
            	url:'${Domain}api/template',
                rownumbers: true,               
                animate: true,
                collapsible: true,
                fitColumns: true,
                pagination:true,
                loadMsg:'数据加载中……',
                fitColumns:true,
                pageSize:20,
                onRowContextMenu:onRowContextMenu_template,
                method: 'post'">
				<thead>
					<tr>
						<th data-options="field:'',checkbox:true"></th>
						<th data-options="field:'id'">编号</th>
						<th data-options="field:'name',width:1">名称</th>
						<th data-options="field:'tags',width:1">标签</th>
						<th data-options="field:'description',width:1">描述</th>
						<th data-options="field:'pinyin'">拼音</th>
						
					</tr>
				</thead>
		</table>
	</section>
<!-- 窗口  -->
<div id="html-win" title="编辑模板"  class="easyui-window" style="width:90%;height:100%;" data-options="closed:true,modal:true">
<iframe scrolling="no" frameborder="0"  style="width:100%;height:98%;" id="html-iframe"></iframe>
</div>
		
		<script type="text/javascript">
		

		$('#template-table').datagrid({
			onLoadSuccess : function(index, row) {//加载
				$('.tngou-btn-template').linkbutton('disable');
				$('#template-btn-edit').splitbutton('disable')	
			},
			onSelect : function(index, row) {//高亮选择
				$('.tngou-btn-template').linkbutton('enable');	
				
				$('#template-btn-edit').splitbutton('enable')			
			}
		});
		function onRowContextMenu_template(e, rowIndex, rowData) {
			e.preventDefault();
			$('#template-table').datagrid('selectRow', rowIndex)
			$('#template-menu').menu('show', {
				left : e.pageX,
				top : e.pageY
			});
		}
		
		//编辑	
		function editHtml(){
			var row = $('#template-table').treegrid('getSelected');			
			if (!row) {
				$.messager.alert('提示', '请选择需要启用数据字典!', 'info');
				return false;
			}
			$("#html-iframe").attr("src","${Domain}my/template/html/"+row.id);
			$('#html-win').window('open');

		
		}	
	

	   //添加
		function addTemplate()
		{		
			$('#tngou-win').panel('resize',{width: 600,height: 340});
			$('#tngou-win').window('open');
			$('#tngou-win').window('setTitle','添加模板');
			$('#tngou-win').window('refresh', '${Domain}my/template/add');			
		}
			
		</script>


</body>
</html>